<template>
    <section>
        <!--高级查询表单-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="query">
                <el-form-item>
                    <el-input v-model="query.keyword" placeholder="关键字"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="search">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" v-on:click="registerTenant">租户入驻</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="pageInfo.rows" highlight-current-row v-loading="listLoading" @selection-change="selsChange"
                  style="width: 100%;">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" width="60">
            </el-table-column>
            <el-table-column prop="companyName" label="店铺名称" width="120" sortable>
            </el-table-column>
            <el-table-column prop="companyNum" label="店铺电话" width="120" sortable>
            </el-table-column>
            <el-table-column prop="registerTime" label="注册时间" width="150" sortable>
            </el-table-column>
            <el-table-column label="状态" width="150">
                <template slot-scope="scope">
                    <el-tag type="warning" v-if="scope.row.state===0">待审核</el-tag>
                    <el-tag type="info" v-if="scope.row.state===1">审核通过，待激活</el-tag>
                    <el-tag type="error" v-if="scope.row.state===2">驳回</el-tag>
                    <el-tag type="error" v-if="scope.row.state===3">审核失败</el-tag>
                    <el-tag type="success" v-if="scope.row.state===4">激活成功</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="地址" width="120" sortable>
            </el-table-column>
            <el-table-column prop="logo" label="商标" width="100"  sortable>
              <template slot-scope="scope">
                <img :src="scope.row.logo" width="40px" height="40px">
              </template>
            </el-table-column>
            <el-table-column prop="adminName" label="管理员" width="100" sortable>
              <template scope="scope">
                  <el-tag v-for="(item,i) in admin" v-if="item.id === scope.row.adminId ? item.username:null">{{item.username}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="typeName" label="店铺类型" width="100" sortable>
            </el-table-column>
          <el-table-column label="操作" width="220">
            <template scope="scope">
              <el-button size="small" @click="handlePass(scope.$index, scope.row)" :disabled="scope.row.state == 3">审核</el-button>
<!--              <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
              <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-col :span="24" class="toolbar">
          <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
            <!--分页条
        total 就是当前满足条件的总条数
    @current-change="handleCurrentChange"  当当前页发生改变时会触发handleCurrentChange()
        -->
            <el-pagination layout="sizes,prev, pager, next"
                           @current-change="handleCurrentChange"
                           @size-change="handleSizeChange"
                           :page-size="query.rows"
                           :page-sizes="[10, 20, 30, 40]"
                           :current-page="query.page"
                           :total="pageInfo.total"
                           style="float:right;">
            </el-pagination>
        </el-col>
      <el-dialog :title="title" :visible.sync="dialogFormPass">
        <el-form :model="passForm" :rules="passRules" ref="passForm">
          <el-form-item :hidden="true">
            <el-input type="text" v-model="passForm.id" ></el-input>
          </el-form-item>
          <el-form-item label="类型" :label-width="formLabelWidth" prop="type">
            <el-select v-model="passForm.type">
              <el-option label="店铺经营范围" value="店铺经营范围"></el-option>
              <el-option label="法人信息" value="法人信息"></el-option>
              <el-option label="店铺logo裁剪" value="店铺logo裁剪"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="原因" :label-width="formLabelWidth" prop="reason">
            <el-input type="textarea" v-model="passForm.reason"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth">
            <el-row style="color: red">提示:驳回请选择 类型 与 原因</el-row>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="pass" :loading="addLoading">通 过</el-button>
          <el-button @click="notPass" :loading="addLoading">驳 回</el-button>
        </div>
      </el-dialog>
    </section>
</template>

<script>
export default {
    data() {
        return {
          title:"审核",
          passRules:{
            type:[
              {required: true, message: '请选择类型', trigger: 'blur'}
            ],
            reason: [
              {required: true, message: '请输入原因', trigger: 'blur'}
            ]
          },
          passForm:{
            id:null,
            type:"",
            reason:'',
          },
          dialogFormPass:false,
          formLabelWidth: '120px',
            pageInfo: {
                rows: [],
                total: 0,
            },
            page: 1,
            listLoading: false,
            sels: [],//列表选中列
            addLoading: false,
            saveFormRules: {
                name: [
                    {required: true, message: '请输入名称', trigger: 'blur'}
                ]
            },
            query: {
                // 查询对象,包括分页条件和高级查询条件
                page: 1,  // 当前页,默认是查询第一页
                rows: 10,    // 每页显示条数,默认是10条,当你第一次访问这个页面时,需要查第几页,每页几条
                keyword: ""
            },
            typeList: [],
          admin:{},
        }
    },
    methods: {
      // 获取管理员
      getAdmin(){
        this.$http.get("/sys/employee/getAdmin").then(res => {
          console.log("+++++++++++++")
          res = res.data.resultObj
          this.admin = res;
          console.log(this.admin)
        })
      },
      batchRemove(){//批量删除
        /*
            前端获取删除数据的id--->数组

            后台接受删除id数据--->数组,集合
            后台功能核心: delete from table where id in()
         */

        var ids = this.sels.map(item => item.id);//数组
        this.$confirm('确认删除选中记录吗？', '提示', {
          type: 'warning'
        }).then(() => {
          this.listLoading = true;
          //let para = { ids: ids };
          this.$http.patch("/sys/tenant/deleteList",ids).then((res) => {
            this.listLoading = false;
            if (res.data.success){
              this.$message({
                message: '删除成功',
                type: 'success'
              });
            }else {
              this.$message.error("删除失败了.请重新再试")
            }
            //重新加载列表数据
            this.getList();
          });
        }).catch(() => {
          this.$message("您已取消此操作");
        });
      },
      //删除
      handleDel: function (index, row) {
        this.$confirm('确认删除该记录吗?', '提示', {
          type: 'warning'
        }).then(() => {
          this.listLoading = true;
          this.$http.delete("/sys/tenant/"+row.id)
              .then(result => {
                result = result.data;
                if(result.success){
                  this.$message({message: '删除成功', type: 'success'});
                  // 刷新列表
                  this.query.page = 1;
                  this.getList();
                  this.listLoading = false;  // 关闭弹出框
                }else{
                  this.$message({message: '删除失败!'+result.message, type: 'error'});
                }
              })
        }).catch(() => {
          this.$message({message: '已取消删除', type: 'info'});
        });
      },
      pass(){
        this.addLoading = true;
        const loading = this.$loading({
          lock: true,
          text: '加载中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.$http.put("/sys/tenant/pass",this.passForm).then(res=>{
          if (res.data.success) {
            this.$message.success(res.data.message);
          }else {
            console.log(1111)
            this.$message.error(res.data.message)
          }
          loading.close();
          this.dialogFormPass = false;
          this.addLoading = false;
          this.getList();
        })
      },
      notPass(){
        this.$refs.passForm.validate((valid) => {
          if (valid) {
            this.addLoading = true;
            const loading = this.$loading({
              lock: true,
              text: '加载中...',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            });
            this.$http.put("/sys/tenant/notPass",this.passForm).then(res=>{
              if (res.data.success) {
                this.$message.success(res.data.message)
              }else {
                console.log(1111)
                this.$message.error(res.data.message)
              }
              loading.close();
              this.dialogFormPass = false;
              this.addLoading = false;
              this.getList();
            })
          }
        })
      },
      handlePass(index,row) {
        this.passForm = {
          id:null,
          type:"",
          reason: ""
        };
        this.title ="审核";
        this.passForm.id = row.id;
        console.log(row.id)
        this.dialogFormPass = true;
      },
        getList() {
          console.log(this.query)
            this.$http.post("/sys/tenant/list", this.query).then(res => {
                console.log("+++++++++++++")
                res = res.data.resultObj
                this.pageInfo = res;
                // console.log(this.pageInfo)
            })
        },
        selsChange: function (sels) {
            this.sels = sels;
        },
        search() {
            // 当 点击"查询"按钮时,要从第一页开始查询
            this.query.page = 1;
            // 调用getDepartment方法查询数据
            this.getList();
        },
        handleCurrentChange(val) {
            // val它就是当前要访问的那个页码,当它发生改变时,需要修改query对象中的page,只有当它发生改变调到后端时,后端的page才会拿到新的页码
            this.query.page = val;
          console.log(val)
            // 重新调用getDepartment(),重新从后端获取数据渲染页面
            this.getList();
        },
        handleSizeChange(val) {
          console.log(val)
            this.query.rows = val;
            this.getList();
        },
        registerTenant() {
             this.$router.push("/ShopRegister")
        },
    },
    mounted() {
        this.getList();
        this.getAdmin();
    }
}

</script>

<style scoped>

</style>